<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h2>系统概览</h2>
    </div>
    
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon users">👥</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.userCount }}</div>
          <div class="stat-label">用户总数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon articles">📝</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.articleCount }}</div>
          <div class="stat-label">文章总数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon categories">📂</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.categoryCount }}</div>
          <div class="stat-label">分类数量</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon tags">🏷️</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.tagCount }}</div>
          <div class="stat-label">标签数量</div>
        </div>
      </div>
    </div>
    
    <div class="charts-section">
      <div class="chart-card">
        <h3>用户增长趋势</h3>
        <div class="chart-placeholder">
          <p>用户增长图表</p>
        </div>
      </div>
      
      <div class="chart-card">
        <h3>文章发布统计</h3>
        <div class="chart-placeholder">
          <p>文章发布图表</p>
        </div>
      </div>
    </div>
    
    <div class="recent-activity">
      <h3>最近活动</h3>
      <div class="activity-list">
        <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
          <div class="activity-icon">{{ activity.icon }}</div>
          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-time">{{ activity.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { userAPI, articleAPI, categoryAPI, tagAPI } from '../../../api/index.js'

export default {
  name: 'AdminDashboard',
  setup() {
    const stats = ref({
      userCount: 0,
      articleCount: 0,
      categoryCount: 0,
      tagCount: 0
    })
    
    const recentActivities = ref([
      { id: 1, icon: '👤', title: '新用户注册: 张三', time: '2小时前' },
      { id: 2, icon: '📝', title: '新文章发布: Vue3 Composition API详解', time: '5小时前' },
      { id: 3, icon: '🏷️', title: '新增标签: 性能优化', time: '1天前' },
      { id: 4, icon: '📂', title: '新增分类: Vue生态', time: '2天前' }
    ])
    
    const fetchStats = async () => {
      try {
        // 获取用户总数
        const userResponse = await userAPI.getUsers({ page: 1, size: 1 })
        stats.value.userCount = userResponse.data.total
        
        // 获取文章总数
        const articleResponse = await articleAPI.getArticles({ page: 1, size: 1 })
        stats.value.articleCount = articleResponse.data.total
        
        // 获取分类总数
        const categoryResponse = await categoryAPI.getCategories()
        stats.value.categoryCount = categoryResponse.data.length
        
        // 获取标签总数
        const tagResponse = await tagAPI.getTags()
        stats.value.tagCount = tagResponse.data.length
      } catch (error) {
        console.error('Failed to fetch stats:', error)
      }
    }
    
    onMounted(() => {
      fetchStats()
    })
    
    return {
      stats,
      recentActivities
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-header h2 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 15px;
}

.stat-icon.users {
  background-color: #3498db;
  color: white;
}

.stat-icon.articles {
  background-color: #2ecc71;
  color: white;
}

.stat-icon.categories {
  background-color: #f39c12;
  color: white;
}

.stat-icon.tags {
  background-color: #9b59b6;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-card h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.chart-placeholder {
  height: 200px;
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f8c8d;
}

.recent-activity h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.activity-list {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 18px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 5px;
}

.activity-time {
  color: #7f8c8d;
  font-size: 14px;
}
</style>